<template>
  <a-card :bordered="false" size="small">
    <lz-search ref="searchBar" :items="items" @search="search"></lz-search>
    <lz-table ref="myTable">
      <div slot="tools">
        <a-button icon="plus" @click="showAdd" type="primary">添加</a-button>
      </div>
    </lz-table>
    <edit ref="edit" @search="search"></edit>
    <auth ref="auth"></auth>
  </a-card>
</template>

<script>
import items from './items'
import edit from './edit'
import auth from './auth'
import { del, updState } from '@/api/sys/role.js'
export default {
  components: { edit, auth },
  name: 'Index',
  data () {
    return {
      items: items
    }
  },
  mounted () {
    this.$refs.myTable.init(
      {
        url: globalConf.baseURL + '/admin/sys/role/getList',
        columns: [
          {
            field: 'roleName',
            title: '名称',
            align: 'left',
            width: 120
          },
          {
            field: 'roleType',
            title: '类型',
            align: 'center',
            width: 100,
            formatter: {
              type: 'text',
              format: row => {
                return {
                  value: row.roleType === 1 ? '系统默认' : '自定义'
                }
              }
            }
          },
          {
            field: 'state',
            title: '状态',
            align: 'center',
            width: 100,
            formatter: {
              type: 'badge',
              format: row => {
                return {
                  value: row.state === 1 ? '启用' : '禁用',
                  color: row.state === 1 ? 'green' : 'red' // 'primary','danger','success','warning','info'
                }
              }
            }
          },
          {
            field: 'note',
            title: '备注',
            align: 'left',
            width: 200,
            hidden: true
          }
        ],
        operate: {
          width: 200,
          items: [
            {
              label: '编辑',
              color: 'primary',
              event: row => {
                this.$refs.edit.showModal(row.id)
              },
              hidden: row => {
                return row.roleType === 1
              }
            },
            {
              label: '权限',
              color: 'primary',
              event: row => {
                this.$refs.auth.showModal(row.id)
              }
            },
            {
              label: '删除',
              color: 'danger',
              event: row => {
                this.$confirm({
                  title: '确认删除？',
                  content: '删除后将无法恢复！',
                  onOk: () => {
                    del({ id: row.id }).then(res => {
                      if (res.code === 1) {
                        this.$message.success('删除成功')
                        this.$refs.myTable.selectedRowKeys = []
                        this.search()
                      }
                    })
                  }
                })
              },
              hidden: row => {
                return row.roleType === 1
              }
            },
            {
              label: '启用',
              color: 'success',
              event: row => {
                this.$confirm({
                  title: '确认启用？',
                  content: '启用后用户可以正常获取角色权限！',
                  onOk: () => {
                    updState({ id: row.id, state: 1 }).then(res => {
                      if (res.code === 1) {
                        this.search()
                      }
                    })
                  }
                })
              },
              hidden: row => {
                return row.roleType === 1 || row.state === 1
              }
            },
            {
              label: '禁用',
              color: 'danger',
              event: row => {
                this.$confirm({
                  title: '确认禁用？',
                  content: '禁用后用户将无法获取系统权限！',
                  onOk: () => {
                    updState({ id: row.id, state: 0 }).then(res => {
                      if (res.code === 1) {
                        this.search()
                      }
                    })
                  }
                })
              },
              hidden: row => {
                return row.roleType === 1 || row.state === 0
              }
            }
          ]
        }
      },
      () => {
        this.search()
      }
    )
  },
  methods: {
    search (param) {
      this.$refs.myTable.search(param || {})
    },
    showAdd () {
      this.$refs.edit.showModal()
    }
  }
}
</script>

<style scoped></style>
